<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>

<div id="a" style="margin-bottom: 200px">
    <h3>阻止冒泡</h3>
    <div style="background-color: darkcyan; width: 500px; height: 500px"
        @click="clk2">
        <div style="background-color: chocolate; width: 400px; height: 400px"
            v-on:click.stop="clk1()">
            <div style="background-color: darkturquoise; width: 300px; height: 300px; color: black"
                v-on:click.stop="nums++" @click.right="nums--">
                {{nums}}
            </div>
        </div>
    </div>
</div>

<script>
    var v = new Vue({
        el : "#a",
        data : {
          nums : 0
        },
        methods : {
            clk1(){
                alert("div1");
            },
            clk2(){
                alert("div2");
            },
            showEvent(e){
                console.info(e);
            }
        }
    })
</script>

</body>
</html>